<template>
  <div class="my-check">
    <head-top head-title="我的查验" goBack="true"></head-top>
    <ul>
      <li v-for="(item, index) in checkList" :key="index" v-show="item.state===1">
        <div class="wrapper border-bottom" @click="$router.push(`/CheckDetailList/${item.id}`)">
          <div class="bgimg" v-lazy:background-image="item.img[0]" v-show="item.img[0]"></div>
          <img src="../../assets/imgDefault.png" alt="" v-show="!item.img[0]">
          <!-- <div class="bgimg" v-lazy:background-image="item.img"></div> -->
          <div class="info">
            <div>
              <div class="title">{{item.project_name}}</div>
              <div class="liftnum" v-show="item.lift_num != '0'">电梯编号：{{item.lift_num}}</div>
              <div class="time">{{item.created_at*1000 | dateFmt('YYYY-MM-DD')}}</div>
            </div>
          </div>
        </div>
        <div class="edit-del">
          <!-- <div class="same" @click="$router.push(`/my/EditCheck/${item.id}/${item.category_id}`)"> -->
          <div class="same" @click="editCheck(item.id, item.category_id, item.status)">
            <span class="edit"></span>编辑
          </div>
          <div class="same" @click="delSelectCheck(item.id)">
            <span class="del"></span>删除
          </div>
        </div>
      </li>
    </ul>
    <div class="no-checkList" v-show="noCheckList">
      <p>抱歉！暂无查验或已全部删除</p>
    </div>
  </div>
</template>

<script>
import headTop from '../../components/header/Header.vue'
import {getCheckList, delCheck} from '../../api/my.js'
import {Toast} from 'mint-ui'
export default {
  name: 'MyCheck',
  data() {
    return {
      checkList: [],
      noCheckList: false,
      stateList: []
    }
  },
  components: {
    headTop
  },
  created() {
    this._getCheckList()
  },
  methods: {
    _getCheckList() {
      getCheckList().then(res => {
        if (res.code === 200) {
          this.checkList = res.data
          this.checkList.forEach((item, index) => {
            this.stateList.push(item.state)
          })
          if (this.stateList.indexOf(1) === -1) {
            this.noCheckList = true
          }
        }
      })
    },
    editCheck(id, gid, status) {
      if (status === 0) {
        Toast({
          message: '超过15天不可编辑',
          position: 'middle',
          duration: 1000
        })
        return
      }
      this.$router.push(`/my/EditCheck/${id}/${gid}`)
    },
    delSelectCheck(id) {
      delCheck(id).then(res => {
        if (res.code === 200) {
          Toast({
            message: res.data,
            position: 'middle',
            duration: 1000
          })
          this._getCheckList()
        }
      })
    }
  }
}
</script>

<style lang="scss">
  @import '../../common/sass/mixin.scss';
  .my-check{
    padding-top: 40px;
    .no-checkList {
      width: 100%;
      flex: 1;
      display: inline-flex;
      padding-top: 0;
      justify-content: center;
      align-items: center;
      background: url("../../assets/default.png") no-repeat #fff;
      background-size: 100px 100px;
      background-position: center;
      padding-bottom: 20px;
      p {
        font-size: 15px;
        color: #0b7ad9;
        margin-top: 190px;
      }
    }
    ul{
      li{
        border-bottom: 10px solid #f2f2f2;
        .wrapper{
          display: flex;
          margin: 0 10px;
          padding: 5px 0;
          img{
            width: 56px;
            height: 56px;
            margin-right: 10px;            
          }
          .bgimg{
            flex: 0 0 56px;
            margin-right: 10px;
            background-size: cover;
            background-repeat: no-repeat;
            width: 56px;
            height: 56px;
          }
          .info{
            flex: 1;
            display: flex;
            align-items: center;
            .title{
              font-size: 15px;
              // font-weight: 400;
            }
            .liftnum{
              margin-top: 10px;
              color: rgb(102,102,102)
            }
            .time{
              margin-top: 10px;
              color: rgb(153,153,153)
            }
          }
        }
        .edit-del{
          text-align: right;
          padding:5px 10px;
          .same{
            display: inline-block;
            padding-right: 10px;
          }
          .edit{
            display: inline-block;
            width: 14px;
            height: 15px;
            background-size: 14px 15px;
            @include bgimg('./images/bianji');
            background-repeat: no-repeat;
            vertical-align: middle;
            margin-right: 5px;
          }
          .del{
            display: inline-block;
            width: 14px;
            height: 15px;
            background-size: 14px 15px;
            @include bgimg('./images/shuanchu');
            background-repeat: no-repeat;
            vertical-align: middle;
            margin-right: 5px;
          }
        }
      }
    }
  }
</style>
